<template>
  <div>
    <nav>
      <div class="box">
        <router-link class="item" to="/Wap" active-class="selected" >帮我买</router-link>
        <router-link class="item" to="/Bang" active-class="selected">帮我送</router-link>
        <router-link class="item" to="/Last" active-class="selected">帮我取</router-link>
        <router-link class="item" to="/Last" active-class="selected">帮我排队</router-link>
        <router-link class="item" to="/Last" active-class="selected">UU帮帮</router-link>
        <router-link class="item" to="/Last" active-class="selected">UU帮帮</router-link>

        <router-link class="list" to="/Last">
          <!-- <img class="img" src="../assets/应用.png" alt /> -->

          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yingyong" />
          </svg>
        </router-link>
      </div>
    </nav>
  </div>
</template>
<script>
export default {};
</script>
<style  scoped lang='less'>
* {
  margin: 0;
  padding: 0;
}
nav {
  width: 95vw;
  height: 11vw;
  background-color: #ffffff;
  box-shadow: 0vw 0vw 1vw 0vw rgba(0, 0, 0, 0.1);
  border-radius: 5vw 1vw 1vw 1vw;
  position: absolute;
  // top: 116vw;
  left: 2vw;
  overflow: hidden;
  overflow-x: scroll;
  bottom: 52vw;
}
/* //隐藏滚动条 */
nav::-webkit-scrollbar {
  display: none;
}
.box {
  position: absolute;
  width: 120vw;
  height: 11vw;
  padding-top: 1vw;
  display: flex;

  .list {
    position: absolute;
    width: 8vw;
    height: 8vw;
    // border: 1px solid red;
    display: inline-block;
    position: fixed;
    // top: 117vw;
    right: 3vw;
    background-color: #fff;
    margin-left: 88vw;
    // margin-top: 2vw;

    .icon {
      // position: absolute;
      display: block;
      width: 8vw;
      height: 6.5vw;
      margin-top: 1vw;
    }
  }
}
.item {
  text-decoration: none;
}
.item {
  height: 3vw;
  font-size: 3vw;
  color: black;
  padding: 2vw 0;
  margin: 0 4vw;

  /* display: inline-block; */
  text-decoration: none;
}

.selected {
  border-bottom: 1px solid #ff8b03;
  color: #ff8b03;
}
</style>